<template>
	<view class="loginCon">
		<view class="title">登录</view>

		<form :modelValue="loginForm" class="form" ref="ruleFormRef" @submit="submitForm($event)">
			<label name="username">
				<input type="text" v-model="loginForm.username" placeholder="请输入姓名" />
			</label>
			<label>
				<input type="password" v-model="loginForm.password" placeholder="请输入密码" />
			</label>

			<view class="btn-group">
				<button form-type="submit" class="btn">登录</button>
				<button class="btn" form-type="reset">重置</button>
			</view>
		</form>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'


	const ruleFormRef = ref(null)

	const loginForm = reactive({
		username: '',
		password: '',
	})

	const submitForm = async (e) => {
		// 简单验证
		if (!loginForm.username) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			});
			return;
		}

		if (!loginForm.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return;
		}
		const response = await uni.request({
			url: 'http://192.168.1.200:8080/user/login',
			method: 'POST',
			header: {
				'Content-Type': 'application/json'
			},
			data: {
				username: loginForm.username,
				password: loginForm.password
			}
		})

		console.log(response);


		const token = response.data.data
		//将token存入
		uni.setStorageSync('token', token);


		uni.switchTab({
			url: "/pages/index/index", // 路径不能携带数据
			success: () => {
				console.log("跳转TabBar页面成功");
			},
			fail: (err) => {
				console.error("跳转失败：", err); // 失败通常是路径错误或页面未配置为TabBar
			}
		});
	}
</script>

<style lang="scss" scoped>
	.loginCon {
		height: 600rpx;
		width: 80%;
		margin: 0 auto;
		background-color: pink;

		.title {
			color: white;
			text-align: center;
			font-size: 50rpx;
			height: 160rpx;
			// background-color: bisque;
			line-height: 200rpx;
		}

		.form {
			display: block;
			margin: 40rpx auto;
			width: 80%;

			input {
				display: block;
				margin-bottom: 30rpx;
				height: 50rpx;
				background-color: white;
			}

			.btn-group {
				display: flex;

			}

			.btn {
				margin-top: 10px;
				width: 160rpx;
				font-size: 30rpx;

			}
		}



	}
</style>